<template>
  <selectFarmType @farmtypemessage="getfarmtypemessage">
    <div slot="farmtypemain" class="binding">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span></span>
          <!-- <el-button
            style="float: right"
            icon="el-icon-circle-check"
          >完成</el-button>-->
          <el-button
            style="float: right; margin-right: 10px"
            icon="el-icon-edit-outline"
            @click="add"
          >修改</el-button>
          <!-- <el-button style="float: right" icon="el-icon-plus">添加</el-button> -->
        </div>
        <div class="card-main">
          <div class="card-main-left">
            <el-tree
              ref="cascaderone"
              :data="tableDatas"
              show-checkbox
              draggable
              node-key="functionId"
              :props="treePropstype"
              @node-click="treeclick"
              @check-change="handleCheckChange"
            />
          </div>
          <div class="card-main-right">
            <el-tree
              ref="cascader"
              :data="tableData"
              show-checkbox
              node-key="functionId"
              :props="treePropstype"
              @node-click="treeclick"
              @check-change="handleCheckChange"
            />
          </div>
        </div>
      </el-card>
    </div>
  </selectFarmType>
</template>

<script>
import axios from "axios";
import { mymixin } from "@/utils/mixins";
import selectFarmType from "./selectFarmTypev3/index.vue";
export default {
  components: { selectFarmType },
  mixins: [mymixin],
  data() {
    return {
      treePropstype: {
        children: "child",
        label: "functionName",
        "show-checkbox": true,
        "check-strictly": true
      },
      tableDatas: [],
      databaseName: "DB_TDW1_PUBLIC",
      farmtypemessage: "",
      nodesInfo: []
    };
  },
  mounted() {
    this.gettabledataList();
  },
  methods: {
    // ---
    getfarmtypemessage(e) {
      const that = this;
      this.farmtypemessage = e;
      // this.getbasemessage(e.farmingTypeNo)
      that.$refs["cascader"].setCheckedNodes([]);
      this.gettabledataListLeft();
    },
    // 点击某一节点
    async treeclick(e) {
      // let nodesInfo = this.$refs['cascader'].getCheckedNodes()
      // console.log(nodesInfo)
      // this.formData = {};
      // this.formData = JSON.parse(JSON.stringify(e));
      this.editActive = true;
      this.addActive = true;
      this.saveActive = false;
      this.cancelActive = false;
      this.canInput = false;
      this.editActive = true;
    },
    handleCheckChange(e) {
      let nodesInfo = this.$refs['cascader'].getCheckedKeys()
      let nodesInfos = this.$refs['cascader'].getHalfCheckedKeys()
      this.nodesInfo = [...nodesInfo, ...nodesInfos]
    },
    // 获取表格信息
    async gettabledataListLeft(e) {
      let params = {
        // page: this.currentPage,
        // size: this.pageSize,
        // entity: {
        systemId: this.farmtypemessage.virtualSystemId
        // }
      };
      const { data: mes } = await axios({
        method: "get",
        url: this.$webSerUrlPro + "config/vSFunctionMapper/queryTree",
        headers: {
          databaseName: this.databaseName
        },
        params: params
      });
      // console.log(mes)
      if (mes.code === 1) {
        this.tableDatas = mes.data || [];
        // this.totalSize = mes.data.totalElements
        this.resetActionBar();
        this.resetWarn();
      } else {
        this.$message.warning("获取表格失败");
      }
    },
    // 获取重复id
    async resetWarn() {
      const that = this;
      const { data: mes } = await axios({
        method: "post",
        url: this.$webSerUrlPro + "config/vSFunctionMapper/queryByCondition",
        headers: {
          databaseName: this.databaseName
        },
        data: {
          virtualSystemId: this.farmtypemessage.virtualSystemId
        }
      });
      // console.log(mes)
      if (mes.code === 1) {
        let data = mes.data;
        data.forEach((item) => {
          // nowcheck.push(item.functionPermissionId)
          that.$nextTick(() => {
            // console.log(item.functionPermissionId)
            // 设置目前所有节点
            // that.$refs.tree.setCheckedKeys([item.routeId], true)
            // 设置某个节点
            that.$refs["cascader"].setChecked(item.functionId, true);
          });
        });
      } else {
        this.$message.warning("获取表格失败");
      }
    },
    // 获取表格信息
    async gettabledataList() {
      let params = {};
      const { data: mes } = await axios({
        method: "get",
        url: this.$webSerUrlPro + "config/function/queryTreeList",
        headers: {
          databaseName: this.databaseName
        },
        data: params
      });
      // console.log(mes)
      if (mes.code === 1) {
        this.tableData = mes.data || [];
        // this.totalSize = mes.data.totalElements
        this.resetActionBar();
      } else {
        this.$message.warning("获取表格失败");
      }
    },
    async add() {
      let params = {
        functionIdList: this.nodesInfo,
        virtualSystemId: this.farmtypemessage.virtualSystemId
      };
      const { data: mes } = await axios({
        method: "post",
        url: this.$webSerUrlPro + "config/vSFunctionMapper/adjustment",
        headers: {
          databaseName: this.databaseName
        },
        data: params
      });
      // console.log(mes)
      if (mes.code === 1) {
        // this.tableData = mes.data || [];
        this.$message.success("修改成功");
        this.gettabledataListLeft();
        // this.totalSize = mes.data.totalElements
        this.resetActionBar();
      } else {
        this.$message.warning("修改失败");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.binding {
  height: 100%;
  width: 100%;
  ::v-deep {
    .el-card {
      height: 100%;
      background-color: #002834;
      color: #54dee2;
      border-color: #005e6a;
      .el-card__header {
        border-bottom-color: #0092a5;
        border-bottom-style: dashed;
        .el-button {
          border: 1px solid #54dee2;
          padding: 5px;
          background: initial;
          color: #54dee2;
        }
        .el-button:focus,
        .el-button:hover {
          color: #ecf5ff;
          border-color: #c6e2ff00;
          background-color: #54dee2;
        }
      }
      .el-card__body {
        height: 100%;
      }
      .card-main {
        height: 90%;

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap;
        & > div {
          flex: 1;
          overflow-y: auto;
          height: 100%;
        }
      }
    }
  }
}
</style>
